// 更新日志页面
import Navbar from '../components/Navbar.js';
import Footer from '../components/Footer.js';
import { navigateTo } from '../router/index.js';

function Changelog() {
  const changelogPage = document.createElement('div');
  changelogPage.className = 'min-h-screen flex flex-col';
  
  // 创建导航栏
  const navbar = Navbar();
  changelogPage.appendChild(navbar);
  
  // 页面内容
  const contentContainer = document.createElement('div');
  contentContainer.className = 'flex-grow';
  contentContainer.innerHTML = `
    
    <!-- 页面标题区 -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-50 section-padding">
      <div class="container mx-auto px-4 md:px-8 text-center">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4">更新日志</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          了解MSRM3的版本更新历史，掌握最新功能和改进
        </p>
      </div>
    </section>
    
    <!-- 更新日志内容 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <!-- 最新版本提示 -->
        <div class="bg-gradient-to-r from-primary to-indigo-600 text-white p-6 rounded-xl shadow-lg mb-10">
          <div class="flex flex-col md:flex-row md:items-center justify-between">
            <div class="mb-4 md:mb-0">
              <h2 class="text-2xl font-bold mb-2">当前最新版本: v3.25.920.1</h2>
              <p>发布日期: 2024-02-05</p>
            </div>
            <button id="latest-download-btn" class="bg-white text-primary px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-gray-100">
              <i class="fa fa-download mr-2"></i>立即下载
            </button>
          </div>
        </div>
        
        <!-- 更新日志列表 -->
        <div class="space-y-10">
          <!-- 版本 v3.25.920.1 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 pb-4 border-b border-gray-100">
              <div>
                <h3 class="text-2xl font-bold text-primary">v3.25.920.1</h3>
                <p class="text-gray-600">发布日期: 2024-02-05</p>
              </div>
              <div class="mt-4 md:mt-0">
                <span class="bg-green-100 text-green-700 text-xs font-medium px-2.5 py-0.5 rounded">重要更新</span>
              </div>
            </div>
            <div class="space-y-6">
              <div>
                <h4 class="text-lg font-bold mb-3 flex items-center">
                  <i class="fa fa-star text-yellow-500 mr-2"></i>核心改进
                </h4>
                <ul class="space-y-2 ml-7 list-disc text-gray-700">
                  <li>升级至.NET 9 AOT，启动速度提升300%</li>
                  <li>优化内存管理，资源占用降低60%</li>
                  <li>全新UI设计，提升用户体验</li>
                  <li>支持Linux系统部署（Ubuntu、Debian、CentOS等）</li>
                  <li>支持国产操作系统（银河麒麟、统信UOS等）</li>
                  <li>单文件打包，无需安装，绿色便携</li>
                </ul>
              </div>
              <div>
                <h4 class="text-lg font-bold mb-3 flex items-center">
                  <i class="fa fa-plus-circle text-green-500 mr-2"></i>新增功能
                </h4>
                <ul class="space-y-2 ml-7 list-disc text-gray-700">
                  <li>内网安全更新功能，支持本地前端更新服务端</li>
                  <li>国产化替代部署场景支持</li>
                  <li>增强型拓扑图管理，支持自定义布局</li>
                  <li>新增网络设备自动分类功能</li>
                  <li>批量操作功能，提升管理效率</li>
                  <li>支持ARM64架构，适配更多硬件平台</li>
                </ul>
              </div>
              <div>
                <h4 class="text-lg font-bold mb-3 flex items-center">
                  <i class="fa fa-bug text-red-500 mr-2"></i>问题修复
                </h4>
                <ul class="space-y-2 ml-7 list-disc text-gray-700">
                  <li>修复部分网络环境下设备发现不完整的问题</li>
                  <li>修复大数据量下的性能问题</li>
                  <li>修复部分浏览器兼容性问题</li>
                  <li>修复SNMP v3协议支持问题</li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- 版本 v3.24.815.1 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 pb-4 border-b border-gray-100">
              <div>
                <h3 class="text-2xl font-bold text-primary">v3.24.815.1</h3>
                <p class="text-gray-600">发布日期: 2023-12-15</p>
              </div>
              <div class="mt-4 md:mt-0">
                <span class="bg-blue-100 text-blue-700 text-xs font-medium px-2.5 py-0.5 rounded">功能更新</span>
              </div>
            </div>
            <div class="space-y-6">
              <div>
                <h4 class="text-lg font-bold mb-3 flex items-center">
                  <i class="fa fa-plus-circle text-green-500 mr-2"></i>新增功能
                </h4>
                <ul class="space-y-2 ml-7 list-disc text-gray-700">
                  <li>新增IP地址规划工具</li>
                  <li>增强网络流量监控功能</li>
                  <li>新增设备分组管理功能</li>
                  <li>支持自定义报表导出</li>
                </ul>
              </div>
              <div>
                <h4 class="text-lg font-bold mb-3 flex items-center">
                  <i class="fa fa-bug text-red-500 mr-2"></i>问题修复
                </h4>
                <ul class="space-y-2 ml-7 list-disc text-gray-700">
                  <li>修复部分设备图标显示错误的问题</li>
                  <li>修复拓扑图拖拽时的性能问题</li>
                  <li>修复部分SNMP设备信息采集不完整的问题</li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- 版本 v3.23.705.1 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 pb-4 border-b border-gray-100">
              <div>
                <h3 class="text-2xl font-bold text-primary">v3.23.705.1</h3>
                <p class="text-gray-600">发布日期: 2023-10-05</p>
              </div>
              <div class="mt-4 md:mt-0">
                <span class="bg-amber-100 text-amber-700 text-xs font-medium px-2.5 py-0.5 rounded">维护更新</span>
              </div>
            </div>
            <div class="space-y-6">
              <div>
                <h4 class="text-lg font-bold mb-3 flex items-center">
                  <i class="fa fa-refresh text-blue-500 mr-2"></i>性能优化
                </h4>
                <ul class="space-y-2 ml-7 list-disc text-gray-700">
                  <li>优化数据存储结构，提升查询速度</li>
                  <li>优化拓扑图渲染性能</li>
                  <li>优化网络扫描算法，提升扫描效率</li>
                </ul>
              </div>
              <div>
                <h4 class="text-lg font-bold mb-3 flex items-center">
                  <i class="fa fa-bug text-red-500 mr-2"></i>问题修复
                </h4>
                <ul class="space-y-2 ml-7 list-disc text-gray-700">
                  <li>修复部分特殊字符导致的显示问题</li>
                  <li>修复长时间运行后的内存泄漏问题</li>
                  <li>修复部分网络环境下的连接超时问题</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 历史版本查看 -->
        <div class="text-center mt-12">
          <button id="show-more-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium px-6 py-3 rounded-lg transition-colors duration-200 flex items-center mx-auto">
            <i class="fa fa-history mr-2"></i>查看更多历史版本
          </button>
        </div>
        
        <!-- 历史版本列表（默认隐藏） -->
        <div id="older-versions" class="mt-8 hidden">
          <!-- 版本 v3.22.618.1 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100 mb-6">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 pb-4 border-b border-gray-100">
              <div>
                <h3 class="text-2xl font-bold text-primary">v3.22.618.1</h3>
                <p class="text-gray-600">发布日期: 2023-08-18</p>
              </div>
              <div class="mt-4 md:mt-0">
                <span class="bg-blue-100 text-blue-700 text-xs font-medium px-2.5 py-0.5 rounded">功能更新</span>
              </div>
            </div>
            <!-- 版本内容省略 -->
            <p class="text-gray-600 italic">此版本包含多项功能改进和问题修复，请下载完整更新日志查看详情。</p>
          </div>
          
          <!-- 版本 v3.21.525.1 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 pb-4 border-b border-gray-100">
              <div>
                <h3 class="text-2xl font-bold text-primary">v3.21.525.1</h3>
                <p class="text-gray-600">发布日期: 2023-06-25</p>
              </div>
              <div class="mt-4 md:mt-0">
                <span class="bg-amber-100 text-amber-700 text-xs font-medium px-2.5 py-0.5 rounded">维护更新</span>
              </div>
            </div>
            <!-- 版本内容省略 -->
            <p class="text-gray-600 italic">此版本包含多项功能改进和问题修复，请下载完整更新日志查看详情。</p>
          </div>
        </div>
        
        <!-- 下载完整更新日志 -->
        <div class="text-center mt-8">
          <button id="download-full-log-btn" class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-800 font-medium px-6 py-3 rounded-lg transition-colors duration-200 flex items-center mx-auto">
            <i class="fa fa-file-text-o mr-2"></i>下载完整更新日志
          </button>
        </div>
      </div>
    </section>
    
  `;
  
  // 创建页脚
  const footer = Footer();
  
  // 组装页面
  changelogPage.appendChild(contentContainer);
  changelogPage.appendChild(footer);
  
  // 添加导航事件监听
  contentContainer.querySelector('#latest-download-btn').addEventListener('click', () => navigateTo('/download'));
  
  // 查看更多历史版本按钮事件
  const showMoreBtn = changelogPage.querySelector('#show-more-btn');
  const olderVersions = changelogPage.querySelector('#older-versions');
  
  showMoreBtn.addEventListener('click', () => {
    if (olderVersions.classList.contains('hidden')) {
      olderVersions.classList.remove('hidden');
      showMoreBtn.innerHTML = '<i class="fa fa-chevron-up mr-2"></i>收起历史版本';
    } else {
      olderVersions.classList.add('hidden');
      showMoreBtn.innerHTML = '<i class="fa fa-history mr-2"></i>查看更多历史版本';
    }
  });
  
  // 下载完整更新日志按钮事件
  changelogPage.querySelector('#download-full-log-btn').addEventListener('click', () => {
    alert('完整更新日志已复制到剪贴板！');
  });
  
  return changelogPage;
}

export default Changelog;